import React, { useState } from "react"
import { Bell, Mail, MessageSquare, Edit, Save, CircleQuestionMark } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"

/**
 * 通知设置
 */
const NotificationSetting = () => {
  // 通知渠道和类型
  const [notificationSettings, setNotificationSettings] = useState({
    emailEnabled: true,
    smsEnabled: true,
    inAppEnabled: true,
    systemAlerts: true,
    projectUpdates: true,
    securityNotifications: true
  })

  // 通知模版
  const [notificationTemplates, setNotificationTemplates] = useState({
    projectCreated: `项目 "{{projectName}}" 已创建`,
    taskCompleted: `任务 "{{taskName}}" 已完成`,
    systemAlert: "系统提醒: {{alertMessage}}"
  })

  /**
   * 处理通知渠道和类型的改变
   *
   * @param key 通知渠道或类型
   * @param value 通知渠道或类型的值
   */
  const handleSettingChange = (key: string, value: boolean) => {
    setNotificationSettings({
      ...notificationSettings,
      [key]: value
    })
  }

  /**
   * 处理通知模版的改变
   *
   * @param key 通知模版
   * @param value 通知模版的值
   */
  const handleTemplateChange = (key: string, value: string) => {
    setNotificationTemplates({
      ...notificationTemplates,
      [key]: value
    })
  }

  /**
   * 提交通知模版
   */
  const handleSave = () => {
    console.log("🚀 ~ NotificationSetting ~ notificationTemplates:", notificationTemplates)
  }

  return (
    <div className="space-y-6">
      {/* 通知渠道设置 */}
      <Card className="dark:bg-gray-800">
        <CardHeader>
          <CardTitle className="flex items-center">
            <Bell className="mr-2 h-5 w-5" />
            通知渠道
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="space-y-4">
            <div className="flex items-center justify-between">
              <div className="flex items-center">
                <Mail className="h-5 w-5 text-blue-500 mr-3" />
                <div>
                  <Label htmlFor="email-notifications" className="text-sm font-medium">
                    邮件通知
                  </Label>
                  <p className="text-sm text-gray-500 dark:text-gray-400">通过电子邮件接收通知</p>
                </div>
              </div>
              <Switch
                id="email-notifications"
                checked={notificationSettings.emailEnabled}
                onCheckedChange={(checked) => handleSettingChange("emailEnabled", checked)}
              />
            </div>

            <div className="flex items-center justify-between">
              <div className="flex items-center">
                <MessageSquare className="h-5 w-5 text-green-500 mr-3" />
                <div>
                  <Label htmlFor="sms-notifications" className="text-sm font-medium">
                    短信通知
                  </Label>
                  <p className="text-sm text-gray-500 dark:text-gray-400">通过短信接收重要通知</p>
                </div>
              </div>
              <Switch
                id="sms-notifications"
                checked={notificationSettings.smsEnabled}
                onCheckedChange={(checked) => handleSettingChange("smsEnabled", checked)}
              />
            </div>

            <div className="flex items-center justify-between">
              <div className="flex items-center">
                <Bell className="h-5 w-5 text-purple-500 mr-3" />
                <div>
                  <Label htmlFor="in-app-notifications" className="text-sm font-medium">
                    站内信通知
                  </Label>
                  <p className="text-sm text-gray-500 dark:text-gray-400">在应用内接收通知消息</p>
                </div>
              </div>
              <Switch
                id="in-app-notifications"
                checked={notificationSettings.inAppEnabled}
                onCheckedChange={(checked) => handleSettingChange("inAppEnabled", checked)}
              />
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 通知类型设置 */}
      <Card className="dark:bg-gray-800">
        <CardHeader>
          <CardTitle className="flex items-center">
            <CircleQuestionMark className="mr-2 h-5 w-5" />
            通知类型
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-4">
            <div className="flex items-center justify-between">
              <Label htmlFor="system-alerts" className="text-sm font-medium">
                系统警报
              </Label>
              <Switch
                id="system-alerts"
                checked={notificationSettings.systemAlerts}
                onCheckedChange={(checked) => handleSettingChange("systemAlerts", checked)}
              />
            </div>

            <div className="flex items-center justify-between">
              <Label htmlFor="project-updates" className="text-sm font-medium">
                项目更新
              </Label>
              <Switch
                id="project-updates"
                checked={notificationSettings.projectUpdates}
                onCheckedChange={(checked) => handleSettingChange("projectUpdates", checked)}
              />
            </div>

            <div className="flex items-center justify-between">
              <Label htmlFor="security-notifications" className="text-sm font-medium">
                安全通知
              </Label>
              <Switch
                id="security-notifications"
                checked={notificationSettings.securityNotifications}
                onCheckedChange={(checked) => handleSettingChange("securityNotifications", checked)}
              />
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 通知模板设置 */}
      <Card className="dark:bg-gray-800">
        <CardHeader>
          <CardTitle className="flex items-center">
            <Edit className="mr-2 h-5 w-5" />
            通知模板
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <div>
            <Label htmlFor="project-created-template" className="text-sm font-medium">
              项目创建通知模板
            </Label>
            <Textarea
              id="project-created-template"
              value={notificationTemplates.projectCreated}
              onChange={(e) => handleTemplateChange("projectCreated", e.target.value)}
              className="mt-1"
              rows={2}
            />
          </div>

          <div>
            <Label htmlFor="task-completed-template" className="text-sm font-medium">
              任务完成通知模板
            </Label>
            <Textarea
              id="task-completed-template"
              value={notificationTemplates.taskCompleted}
              onChange={(e) => handleTemplateChange("taskCompleted", e.target.value)}
              className="mt-1"
              rows={2}
            />
          </div>

          <div>
            <Label htmlFor="system-alert-template" className="text-sm font-medium">
              系统警报通知模板
            </Label>
            <Textarea
              id="system-alert-template"
              value={notificationTemplates.systemAlert}
              onChange={(e) => handleTemplateChange("systemAlert", e.target.value)}
              className="mt-1"
              rows={2}
            />
          </div>

          <div className="pt-4">
            <Button onClick={handleSave}>
              <Save className="mr-2 h-4 w-4" />
              保存通知设置
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}

export default NotificationSetting
